<template>
    <view class="blood-container">
        <CmsTabs :type="8" :page-title="'成为会员'" @project-tab-change="handleProjectTabChange" @data-loaded="handleDataLoaded">
            <!-- 驳回提示 -->
            <view v-if="memberStatus == 2 && showRejectTip" class="reject-tip">
                <view class="icon-info">i</view>
                <text>驳回原因：{{ rejectReason }}</text>
                <view class="close-btn" @click="showRejectTip = false">
                    <img src="/static/close.png" alt="关闭" mode="aspectFit">
                </view>
            </view>

            <!-- 缴费提醒弹窗 -->
            <view class="success-popup" v-if="showPaymentReminder" @click="handleClosePaymentReminder">
                <view class="popup-mask"></view>
                <view class="success-popup-content" @click.stop>
                    <view class="success-icon">
                        <image src="../../static/money.png" mode="widthFix" />
                    </view>
                    <view class="success-title">请及时完成缴费</view>
                    <view class="success-message">您的会员申请已通过审核，请尽快完成缴费以激活会员资格。</view>
                    <view class="success-btn" @click="handleGoPayment">
                        <text class="btn-text">立即缴费</text>
                    </view>
                </view>
            </view>

            <view class="footer-btn">
                <view class="primary-btn" :class="{ disabled: buttonText === '审核中' || buttonText === '已是会员' }" @click="handleGoBlood">{{ buttonText }}</view>
            </view>
        </CmsTabs>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import CmsTabs from '@/components/cms-tabs/cms-tabs.vue'
import { getMemberInfo } from '@/utils/api.js'
import { handleFormButtonClick } from '@/utils/loginGuard.js'

// 会员状态
const memberStatus = ref(null)
const buttonText = ref('成为会员')
const rejectReason = ref('')
const showRejectTip = ref(false)

// 缴费提醒弹窗
const showPaymentReminder = ref(false)

// 处理项目tab切换
const handleProjectTabChange = (tabData) => {
    console.log('项目tab切换:', tabData)
}

// 处理数据加载完成
const handleDataLoaded = (data) => {
    console.log('数据加载完成:', data)
}

// 检查会员状态
const checkMemberStatus = async () => {
    try {
        const result = await getMemberInfo()
        if (result.code === 0 && result.data) {
            const memberInfo = result.data
            memberStatus.value = memberInfo.auditStatus
            
            if (memberInfo.auditStatus == 1) {
                // 审核通过
                buttonText.value = '已是会员'
                // 检查是否需要显示缴费提醒
                // 如果审核通过但未缴费，显示缴费提醒
                // 如果renew为0，表示不需要续费，即已缴费
                if (memberInfo.renew == 1) {
                    // 青少年（isTeenager == 1）不弹出缴费提醒
                    showPaymentReminder.value = memberInfo.isTeenager == 1 ? false : true
                } else {
                    showPaymentReminder.value = false
                }
            } else if (memberInfo.auditStatus == 0 && memberInfo.realSign) {
                // 审核中且有签名
                buttonText.value = '审核中'
                showPaymentReminder.value = false
            } else if (memberInfo.auditStatus == 2) {
                // 被拒绝
                buttonText.value = '重新申请'
                rejectReason.value = memberInfo.reason || '审核拒绝'
                showRejectTip.value = true
                showPaymentReminder.value = false
            } else {
                // 未申请或审核中但无签名
                buttonText.value = '成为会员'
                showRejectTip.value = false
                showPaymentReminder.value = false
            }
        }
    } catch (error) {
        console.error('检查会员状态失败:', error)
        // 如果检查失败，默认显示成为会员
        buttonText.value = '成为会员'
        showRejectTip.value = false
        showPaymentReminder.value = false
    }
}

onShow(() => {
    checkMemberStatus()
})

// 关闭缴费提醒弹窗
const handleClosePaymentReminder = () => {
    showPaymentReminder.value = false
}

// 跳转到缴费页面
const handleGoPayment = () => {
    handleFormButtonClick('/pages/my/pay')
}

// 成为会员
const handleGoBlood = async () => {
    // 如果按钮是禁用状态，直接返回
    if (buttonText.value === '审核中' || buttonText.value === '已是会员') {
        return
    }
    
    try {
        // 先检查会员状态
        const result = await getMemberInfo()
        if (result.code === 0 && result.data) {
            const memberInfo = result.data
            
            if (memberInfo.auditStatus === 1) {
                // 已是会员
                uni.showToast({
                    title: '您已是会员',
                    icon: 'success'
                })
                return
            } else if (memberInfo.auditStatus === 0 && memberInfo.realSign) {
                // 审核中且有签名
                uni.showToast({
                    title: '您的申请正在审核中',
                    icon: 'none'
                })
                return
            } else if (memberInfo.auditStatus === 2) {
                // 被拒绝，可以重新申请
                handleFormButtonClick('/pages/vip/detail')
                return
            }
        }
        
        // 跳转到详情页
        handleFormButtonClick('/pages/vip/detail')
    } catch (error) {
        console.error('检查会员状态失败:', error)
        // 如果检查失败，直接跳转
        handleFormButtonClick('/pages/vip/detail')
    }
}
</script>

<style lang="scss" scoped>  
    .blood-container {
        width: 100%;
        min-height: 100vh;
        background: #f5f5f5;
        padding-bottom: 140rpx; /* 为固定底部按钮留出空间 */
    }

    .footer-btn{
        position: fixed;
        bottom: 0;
        left: 0;
        width: calc(100% - 48rpx);
        height: 100rpx;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24rpx 24rpx 28rpx 24rpx;
        z-index: 100;

        .primary-btn {

            &.disabled {
                background: #ccc;
                box-shadow: none;
                cursor: not-allowed;

                &:active {
                    transform: none;
                }
            }
        }
    }

    .reject-tip {
        display: flex;
        align-items: center;
        background: #F96C6C;
        color: #fff;
        padding: 20rpx;
        font-size: 28rpx;
        position: relative;

        .icon-info {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            background: #fff;
            color: #F96C6C;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 16rpx;
            font-size: 28rpx;
        }
        .close-btn {
            position: absolute;
            right: 24rpx;
            top: 24rpx;
            width: 32rpx;
            height: 32rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 50%;
            transition: background-color 0.3s ease;

            &:hover {
                background-color: rgba(255, 255, 255, 0.2);
            }

            img {
                width: 24rpx;
                height: 24rpx;
                display: block;
            }
        }
    }

    // 成功弹窗样式
    .success-popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;

        .popup-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
        }

        .success-popup-content {
            position: relative;
            width: 600rpx;
            background: #fff;
            border-radius: 24rpx;
            padding: 48rpx;
            text-align: center;
            box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
            animation: popupSlideIn 0.3s ease-out;

            @keyframes popupSlideIn {
                from {
                    opacity: 0;
                    transform: translateY(40rpx) scale(0.9);
                }
                to {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }

            .success-icon {
                width: 120rpx;
                height: 120rpx;
                margin: 0 auto 32rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .success-title {
                font-size: 36rpx;
                font-weight: 600;
                color: #333;
                margin-bottom: 24rpx;
            }

            .success-message {
                font-size: 28rpx;
                color: #666;
                line-height: 1.5;
            }

            .success-btn {
                width: 100%;
                height: 88rpx;
                background: linear-gradient(135deg, #F9623E 0%, #FF7A5A 100%);
                border-radius: 44rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 32rpx;
                font-weight: 500;
                box-shadow: 0 8rpx 24rpx rgba(249, 98, 62, 0.3);
                transition: all 0.3s ease;
                margin-top: 48rpx;

                &:active {
                    transform: scale(0.98);
                    box-shadow: 0 4rpx 12rpx rgba(249, 98, 62, 0.3);
                }

                .btn-text {
                    color: #fff;
                }
            }
        }
    }
</style>